<template>
	<uni-nav-bar height="88rpx" statusBar left-icon="back" :border="false" v-bind="mergedObj" @clickLeft="goback" @clickRight="clickRight" class="custom-nav-bar" />
	<view class="tabbar-box"></view>
</template>

<script setup>
	import { Log } from 'ethers';
	import { ref, computed, watch,defineEmits } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	import { useTitleStore } from '@/stores/title';
	onLoad(()=>{
		uni.setNavigationBarTitle({
			title: useTitleStore().globalTitle
		});
	})
	
	const props = defineProps({
		obj: {
			type: Object,
			default: () => ({})
		},
		delta: {
			type: Number,
			default: 1
		},
		threshold: {
			type: Number,
			default: 44
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	});

	const isScrolled = ref(false);

	const mergedObj = computed(() => ({
		...props.obj,
		backgroundColor: shouldChangeColor.value ? (isScrolled.value ? '#ffffff' : defaultBgColor.value) : props.obj.backgroundColor,
		color: isScrolled.value ? '#000000' : props.obj.color || '#ffffff',
		fixed: true
	}));

	const defaultBgColor = computed(() => props.obj.backgroundColor || 'transparent');

	const shouldChangeColor = computed(() => ['transparent', ''].includes(defaultBgColor.value));

	watch(
		() => props.scrollTop,
		(newVal) => {
			if (!shouldChangeColor.value) return;
			isScrolled.value = newVal > props.threshold;
		}
	);

	function goback() {
		const page = getCurrentPages();
		if (page.length === 1) {
			uni.reLaunch({ url: '/pages/index' });
		} else {
			uni.navigateBack({ delta: props.delta });
		}
	}
	const emits = defineEmits(['clickRight']);

	function clickRight() {
		emits('clickRight', {});
	}

	defineOptions({
		options: {
			styleIsolation: 'shared'
		}
	});
</script>

<style scoped lang="scss">
	:deep(.uni-nav-bar-text) {
		font-weight: 500;
		font-size: 36rpx !important;
		color: #000000;
	}

	// .nav-bar-wrapper {
	// 	transition: all 0.3s ease-in-out;
	// 	position: fixed;
	// 	width: 100%;
	// 	z-index: 999;
	// }

	// .tabbar-box {
	// 	height: 88rpx;
	// 	width: 100%;
	// }

	// .custom-nav-bar {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 99;
	// 	width: 100%;
	// }
</style>
